import { useEffect, useRef } from 'react'
import THREEProject from '../utils/index'
import {arrNomarlize} from '../utils/helper'
// import myWorker from './../utils/worker'


const BufferGeometryII = () => {
  // console.log('myWorker', myWorker)
  const can = useRef(null)
  const pro = new THREEProject([1, 1, 1])
  const { thr, renderer, scene, axes, camera, controls } = pro
  
  const fileLoader2 = new thr.FileLoader()
  const init = () => {
    scene.add(axes)

    
   
    const material = new thr.MeshBasicMaterial({
      side: thr.DoubleSide,
      vertexColors: true
    })
    const fileRoad = '/assets/(v2.0)GBD_HangJiang_River_griddata_threejs_no.no_cut_all_size100.json'
    const fileLoader = new thr.FileLoader()
      const geometry = new thr.BufferGeometry()
      fileLoader.load(fileRoad, res => {
        console.log('dataJSON', JSON.parse(res).data)
        const {vertices, colors} = arrNomarlize(JSON.parse(res).data, [10, 0.003, 10])
        console.log('list', colors)
        console.log('vertices', vertices)
        geometry.setAttribute('position', new thr.BufferAttribute(new Float32Array(vertices), 3))
        geometry.setAttribute('color', new thr.BufferAttribute(new Float32Array(colors), 3))
        console.log("🚀 ~ file: BufferGeometryII.js ~ line 14 ~ init ~ geometry", geometry)
        const mesh = new thr.Mesh(geometry, material)
        mesh.name ="model"
        scene.add(mesh)
      })
    // for(let i = 0; i < 27; i++) {
    //   const fileLoader = new thr.FileLoader()
    //   const geometry = new thr.BufferGeometry()
    //   fileLoader.load(`/assets/size_50/size_50/(v2.0)GBD_HangJiang_River_griddata_threejs_no.${i}_size50.json`, res => {
    //     console.log('dataJSON', JSON.parse(res).data)
    //     const {vertices, colors} = arrNomarlize(JSON.parse(res).data, [10, 0.003, 10])
    //     console.log('list', colors)
    //     console.log('vertices', vertices)
    //     geometry.setAttribute('position', new thr.BufferAttribute(new Float32Array(vertices), 3))
    //     geometry.setAttribute('color', new thr.BufferAttribute(new Float32Array(colors), 3))
    //     console.log("🚀 ~ file: BufferGeometryII.js ~ line 14 ~ init ~ geometry", geometry)
    //     const mesh = new thr.Mesh(geometry, material)
    //     mesh.name ="model"
    //     scene.add(mesh)
    //   })
    // }
    
    // fileLoader2.load('/assets/1-2-3-polygon.json', res => {
    //   console.log('dataJSON', JSON.parse(res).data)
    //   const {vertices, colors} = arrNomarlize(JSON.parse(res).data)
    //   console.log('list', colors)
    //   geometry.setAttribute('position', new thr.BufferAttribute(new Float32Array(vertices.reverse()), 3))
    //   geometry.setAttribute('color', new thr.BufferAttribute(new Float32Array(colors), 3))
    //   console.log("🚀 ~ file: BufferGeometryII.js ~ line 14 ~ init ~ geometry", geometry)
    //   const mesh = new thr.Mesh(geometry, material)
    //   mesh.name ="123123"
    //   mesh.position.x = 5
    //   scene.add(mesh)
    // })
    scene.add(new thr.AmbientLight(0xffffff))
    appendRenderDom()
    animate()
  }


  const appendRenderDom = () => {
    if(!can.current.children.length) {
      can.current.appendChild(renderer.domElement)
    }
  }

  const render = () => {
    controls.update()
    renderer.render(scene, camera)
  }

  const animate = () => {
    requestAnimationFrame(animate)
    render()
  }

  useEffect(init, [])

  return (
    <div ref={can}></div>
  )
}

export default BufferGeometryII
export {
  BufferGeometryII
}